<template>
	<div class="juhe">
		<div class="square" v-for="(item, index) in ButtonBanner" :key="index" @click="clickBanner(index)">
			<div class="iiimg">
				<img :src="baseUrl + item.imgUrl" mode=""/>
			</div>
			<div class="text">{{ ButtonBanner[index].name }}</div>
		</div>
	</div>
</template>
<script>
import axios from "axios";
import {
	getUrl
} from "@/config.js";
export default {
	data() {
		return {
			ButtonBanner:[],
			baseUrl: "",
		}
	},
	methods: {
		clickBanner(index){
			var banner = this.ButtonBanner[index];
			console.log(banner.contentType);
			// if(banner.contentType == 0){

			// }
		}
		
	},
	mounted() {
		this.baseUrl = getUrl();
		console.log(this.baseUrl);
		var token = localStorage.getItem('token')
		axios.get(
			this.baseUrl + "/system/banner/list?token=" + token,
			// `https://www.ainaoxingdong.com/api/an/wechat_app/wechat_user/report/bind_img?token=${_this.token}`,
			{
				// phone: this.phoneInfo,
				// isSuggest: 3
			}
		).then((res) => {
			console.log(res);
			this.ButtonBanner = res.data.rows
		});
	}
}
</script>

<style scoped>
.juhe {
	width: 100%;
	/* height: 100%; */
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 30px;
}

.square {
	width: 320px;
	height: 190px;
	background-color: #ffffff;
	border-radius: 25px;
	margin-top: 32px;
	display: flex;
	flex-direction: column;
	box-shadow: 0px 6px 16px 0px rgba(75, 126, 139, 0.2);
}

.iiimg {
	flex: 1;
	height: 160px;
}

.iiimg img {
	width: 100%;
	height: 160px;
	border-radius: 25px 25px 0 0;
}

.text {
	width: 100%;
	height: 30px;
	line-height: 30px;
	padding-left: 16px;
}
</style>
